<style>
	@import "../../common/components_css/cg_swiper.css";
</style>
<template>
	<view class="" style="position: relative;">
		<swiper
			class="swiper"
			:style="{height:swiperHeight + 'rpx',opacity:cgSwiperOpacity}"
			:indicator-dots="swiperDots"
			:autoplay="autoplay"
			:indicator-color="swiperColor"
			:circular="circular"
			:duration="duration"
			:indicator-active-color="swiperActiveColor"
			@change="swiperChange"
		>
			<swiper-item v-for="key of swiperPage" :key="key">
				<view class="swiper-item">
					<view class="swiper-item-view" 
					v-for="(item, index) in swiperList" 
					:key="index"  
					@click="clickItem(item,(key + 1) * 6 + index)" 
					v-if=" (key * 6 <= index ) && (index < (key + 1) * 6)"
					>
						<view class="border-swiper" v-show="isShowBorder == true && ((key + 1) * 6 + index == swiper_item_current)"></view>
						<view v-if="swiperCurrent * 6 <= index">
							<view v-if="item.id == -1" class="add-swiper">
								<image class="swiper-add-img" :src="item.img"></image>
								<view class="swiper_title_bg">
									<span>{{item.text}}</span>
								</view>
							</view>
							<view v-else>
								<image class="swiper-img" :src="item.img"></image>
								<view class="swiper_title_bg">
									<span>{{item.text}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="dots" v-if="customize == true && swiperDots == false && cgSwiperOpacity">
			<block v-for="index of swiperPage" :key="index" v-if="swiperPage > 1">
				<view
					class="dot"
					:class="[index == swiperCurrent ? 'active' : '']"
					:style="[index == swiperCurrent ? { background: swiperActiveColor } : { background: swiperColor }]"
				></view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	name: 'cg-swiper',
	props: {
		// 面板指示点
		swiperDots: {
			type: Boolean,
			default: false
		},
		// 指示点颜色
		swiperColor: {
			type: String,
			default: '#D8D8D8'
		},
		// 选中指示点颜色
		swiperActiveColor: {
			type: String,
			default: '#252631'
		},
		// 是否自动切换
		autoplay: {
			type: Boolean,
			default: false
		},
		// 滑动动画时长
		duration:{
			type: Number,
			default: 500
		},
		// 是否采用衔接滑动
		circular: {
			type: Boolean,
			default: false
		},
		// 滑动块视图容器
		swiperList: {
			type: Array,
			default: function() {
				return [
					
				];
			}
		},
		swiperPage:{
			type:Number,
			default:function(){
				return 0;
			}
		},
		isShowBorder:{
			type:Boolean,
			default:true
		},
		// 是否开启自定义指示点
		customize: {
			type: Boolean,
			default: true
		},
		swiperHeight:{
			type:Number,
			default:388
		},
		cgSwiperOpacity:{
			type:Number,
			default:1
		}
	},
	data() {
		return {
			swiperCurrent: 0,
			swiper_item_current:-1
		};
	},
	
	methods: {
		swiperChange(e) {
			console.log(e)
			this.swiperCurrent = e.detail.current;
		},

		clickItem(item,index) {
			this.$emit('clickItem', item);
			this.swiper_item_current = index
		}
	}
};

</script>
